import React, {useEffect, useState} from 'react'
import {Deck, Card} from '../assets/className.ts'
import  HeartIcon  from './partern/Heart.tsx';
interface DeckProps {
  cards: Card[];
}

const DeckBody = function (props: DeckProps){
  const deck = new Deck(props.cards);
  const [ style, setStyle ]= useState({
    deckBody: {
      width: '200px',
      height: '50px',
    }as React.CSSProperties
  }) 
  function handleDrawCard(){
    const card = deck.drawCard()
    if (card){
      // send card info to http server
      console.log('card info', card, deck.cards.length)
    } else {
      // alert('no more cards')
      console.log('no more cards')
      setStyle({
        ...style,
        deckBody: {
          display: 'none'
        }
      })
    }
  }

  return <>
  <div className="deck-body" style={style.deckBody} onClick={handleDrawCard}>
    <HeartIcon color='red' size={24}/>
  </div>
  </>
}

export default DeckBody;